<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to the Login Page</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        --font: rgb(57, 57, 57);
        --font2: rgb(21, 21, 21);
        --accent: rgb(255, 120, 150);
      }

      body {
        background: linear-gradient(
          to top right,
          rgb(109, 109, 163),
          rgb(255, 83, 255),
          rgb(254, 120, 143),
          rgb(255, 194, 80),
          rgb(253, 253, 103)
        );
        min-height: 100vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        overflow-y: auto;
        padding: 40px 10px;
      }

      .glass {
        position: fixed;
        background-color: black;
        backdrop-filter: blur(50px);
        opacity: 0.3;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
      }

      input[type="radio"] {
        display: none;
      }

      .box {
        background: rgba(255, 254, 254, 0.3);
        backdrop-filter: blur(40px);
        border-radius: 15px;
        z-index: 1;
        width: 100%;
        max-width: 420px;
        padding: 25px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        box-shadow: 5px 5px 20px rgba(54, 54, 54, 0.3);
        transition: transform 0.3s ease;
      }

      .box:hover {
        transform: scale(1.01);
      }

      .slider {
        display: flex;
        width: 100%;
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 15px;
      }

      .sign,
      .login {
        flex: 1;
        text-align: center;
        padding: 12px;
        font-size: small;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
      }

      .sign {
        background-color: black;
        color: rgb(172, 172, 172);
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }

      .sign:hover {
        background-color: var(--accent);
        color: white;
      }

      .login {
        background-color: rgb(227, 227, 227);
        color: black;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      .login:hover {
        background-color: black;
        color: white;
      }

      /* Active states for tabs */
      #signupRadio:checked ~ .box .sign {
        background-color: black;
        color: rgb(172, 172, 172);
      }

      #signupRadio:checked ~ .box .login {
        background-color: rgb(227, 227, 227);
        color: black;
      }

      #loginRadio:checked ~ .box .sign {
        background-color: rgb(227, 227, 227);
        color: black;
      }

      #loginRadio:checked ~ .box .login {
        background-color: black;
        color: white;
      }

      .head {
        margin: 20px 0;
        font-size: 1.4rem;
        font-weight: bold;
        color: var(--font2);
        text-align: center;
      }

      .signup-head {
        display: block;
      }

      .login-head {
        display: none;
      }

      #loginRadio:checked ~ .box .signup-head {
        display: none;
      }

      #loginRadio:checked ~ .box .login-head {
        display: block;
      }

      .option {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        font-size: 0.9rem;
        border: 1px solid var(--font);
        width: 85%;
        height: 38px;
        margin: 8px 0;
        border-radius: 50px;
        color: var(--font);
        background-color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .option:hover {
        background-color: var(--font);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      }

      .divider {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 85%;
        font-weight: lighter;
        color: var(--font2);
        margin: 15px 0;
      }

      .divider hr {
        flex: 1;
        border: none;
        height: 1px;
        background-color: var(--font2);
        margin: 0 10px;
        opacity: 0.5;
      }

      .form {
        display: flex;
        flex-direction: column;
        width: 85%;
        gap: 15px;
      }

      .form-box {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      .form-box label {
        font-size: 0.85rem;
        color: var(--font2);
        margin-bottom: 5px;
      }

      .form-box input {
        height: 42px;
        border-radius: 8px;
        border: 1px solid var(--font2);
        padding-left: 10px;
        font-size: 1rem;
        transition: all 0.3s ease;
        outline: none;
      }

      .form-box input:hover {
        border-color: var(--accent);
      }

      .form-box input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 5px rgba(255, 120, 150, 0.5);
      }

      /* Show/Hide name fields based on mode */
      .name-fields {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 15px;
      }

      #loginRadio:checked ~ .box .name-fields {
        display: none;
      }

      .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 85%;
        height: 45px;
        background-color: var(--font);
        color: white;
        border-radius: 50px;
        font-weight: lighter;
        font-size: 1rem;
        margin-top: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .button:hover {
        background-color: var(--accent);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      }

      /* Show/Hide buttons based on mode */
      .signup-btn {
        display: flex;
      }

      .login-btn {
        display: none;
      }

      #loginRadio:checked ~ .box .signup-btn {
        display: none;
      }

      #loginRadio:checked ~ .box .login-btn {
        display: flex;
      }

      /* Responsive adjustments */
      @media (max-width: 480px) {
        .box {
          padding: 20px 15px;
        }

        .option,
        .form,
        .button {
          width: 95%;
        }

        .head {
          font-size: 1.2rem;
        }
      }
    </style>
  </head>
  <body>
    <input type="radio" name="mode" id="signupRadio" checked />
    <input type="radio" name="mode" id="loginRadio" />

    <div class="glass"></div>
    <div class="box">
      <div class="slider">
        <label for="signupRadio" class="sign">Sign Up</label>
        <label for="loginRadio" class="login">Login</label>
      </div>
      <div class="head signup-head">Create an Account</div>
      <div class="head login-head">Welcome Back</div>
      <div class="option facebook">Continue with Facebook</div>
      <div class="option google">Continue with Google</div>
      <div class="divider">
        <hr />
        OR
        <hr />
      </div>
      <div class="form">
        <div class="name-fields">
          <div class="form-box">
            <label for="name1">First Name</label>
            <input type="text" id="name1" placeholder="Enter your first name" />
          </div>
          <div class="form-box">
            <label for="name2">Last Name</label>
            <input type="text" id="name2" placeholder="Enter your last name" />
          </div>
        </div>
        <div class="form-box">
          <label for="email">Email Address</label>
          <input type="email" id="email" placeholder="example@email.com" />
        </div>
        <div class="form-box">
          <label for="password">Password</label>
          <input
            type="password"
            id="password"
            placeholder="Create a password"
          />
        </div>
      </div>
      <div class="button signup-btn">Sign Up</div>
      <div class="button login-btn">Login</div>
    </div>
  </body>
</html>
